<template>
    <div>
        <el-row :gutter="20">
            <!-- 左边 -->
            <el-col :span="12" >
                <!-- 左边第一个 -->
                <div class="myCon">
                    <div class="myechartFirst">
                        <div class="myLeft">
                            <img src="../../../assets/imgx/title-1.png" alt="" />
                            <span class="mySpan">每天故障次数</span>
                        </div>
                        <!-- <div class="mySerch">
                            <input type="text" placeholder="输入时间" class="myInput1" v-model="startTime">-
                            <input type="text" placeholder="输入时间" class="myInput2" v-model="endTime"><button class="mybutton1" @click="faultCountRecordExceptst"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div> -->
                        <div class="mySerch">
                            <!-- <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker> -->
                            <el-date-picker
                            v-model="value4"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>&nbsp;--&nbsp;
                            <el-date-picker
                            v-model="value5"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>
                            <button class="mybutton1" @click="faultCountRecordExceptst"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div>
                        
                    </div>
                    <div
                        class="echart"
                        ref="mychart"
                        id="mychart"
                        :style="{ float: 'left', width: '100%', height: '300px' }"
                    ></div>
                    
                </div>
                <!-- 左边第二个 -->
                <div class="myCon1">
                    <div class="myechartFirst1">
                        <div class="myLeft1">
                        <img src="../../../assets/imgx/title-1.png" alt="" />
                        <span class="mySpan1">每天维修时间</span>
                        </div>
                        <!-- <div class="mySerch1">
                            <input type="text" placeholder="输入时间" class="myInput3" v-model="startTime1">-
                            <input type="text" placeholder="输入时间" class="myInput4" v-model="endTime1"><button class="mybutton2" @click="countMaintenanceTime"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div> -->
                        <div class="mySerch">
                            <!-- <el-date-picker
                                v-model="value2"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker> -->
                            <el-date-picker
                            v-model="value6"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>&nbsp;--&nbsp;
                            <el-date-picker
                            v-model="value67"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>
                            <button class="mybutton1" @click="countMaintenanceTime"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div>
                    </div>
                    <div
                        class="echart1"
                        ref="mychart1"
                        id="mychart1"
                        :style="{ float: 'left', width: '100%', height: '300px' }"
                    ></div>
                </div>
        
            </el-col>
            <!-- 右边 -->
            <el-col :span="12">
                <!-- <div class="grid-content bg-purple"> -->
                <div class="myechartFirst2">
                        <div class="myLeft2">
                        <img src="../../../assets/imgx/title-1.png" alt="" />
                        <span class="mySpan2">故障分类统计</span>
                        </div>
                        <!-- <div class="mySerch">
                            <input type="text" placeholder="输入时间" class="myInput1" v-model="startTime2">-
                            <input type="text" placeholder="输入时间" class="myInput2" v-model="endTime2"><button class="mybutton1" @click="recordExceptCit"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div> -->
                        <div class="mySerch">
                            <!-- <el-date-picker
                                v-model="value3"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker> -->
                            <el-date-picker
                            v-model="value8"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>&nbsp;--&nbsp;
                            <el-date-picker
                            v-model="value9"
                            type="date"
                            placeholder="选择日期"
                            value-format='yyyy-MM-dd' class="myInput1">
                            </el-date-picker>
                            <button class="mybutton1" @click="recordExceptCit"> <img src="../../../assets/icon/serch-1.png" alt=""><span>搜索</span></button>
                        </div>
                    </div>
                    <div
                        class="echart2"
                        ref="mychart2"
                        id="mychart2"
                        :style="{ float: 'left', width: '100%', height: '600px' }"
                    ></div>
                <!-- </div> -->
            </el-col>
        </el-row>
    </div>
</template>


<script>
import { faultCountRecordExceptst,countMaintenanceTime, recordExceptCit } from '@/api/FaultMaintenanceApi/index';
import * as echarts from "echarts";

export default {
    data() {
    return {
        value1:'',
        value4:'',
        value5:'',
        startTime:'',
        endTime:'',
        mydata:[],
        arr : [],
        xData:[],//暂存X轴数据
        option :{
            grid: {
                    borderWidth: 1,
                    left: "7%",
                    top: "10%",
                    right: "5%",
                    bottom: "10%"
                    },
            textStyle:{
                color:"#E9EFFF ",
                fontStyle:'normal'
            },
            tooltip: {
					trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
					axisPointer: {// 坐标轴指示器，坐标轴触发有效
                    label:{
                        show:true
                    },
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
            },


             /* 横轴 */
            xAxis: {
                /* 横轴为类别 */
                type: 'category',
                data: ['1', '2', '3', '4', '5','6','7','8', '9', '10', 
                '11', '12','13','14','15', '16', '17', '18', '19','20',
                '21', '22', '23', '24', '25','26','27','28','29','30']
            },
            yAxis: {
                textStyle:{
                    color:"#E9EFFF ",
                    fontStyle:'normal'
                },
                /* 纵轴为数据 */
                type: 'value',
                splitLine: {
                show: true,
                    lineStyle: {
                    type: "dashed",
                    color: "#155DAD",
                    opacity: 0.2,
                    },
                },
                name:'次数',
                nameLocation:'end',
                
            },
            
            /* 数据系列 */
            series: [{
                /* data值长度必须对应x轴长度 */
                data: [],
                /* 折线图 */
                type: 'line',
                /* 是否添加平滑效果，不书写则默认不平滑*/
                //smooth:true,
                // areaStyle: {
                //         // color :['RGBA(3, 18, 48, 1)','RGBA(22, 56, 107, 1)'],
                //         shadowColor:['RGBA(3, 18, 48, 0.5)','RGBA(22, 56, 107, 0.5)'],
                //         // shadowBlur: 5
                // }

                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                            {
                                offset: 0,
                                color: "RGB(34,79,140,1)",
                            },
                            {
                                offset: 1,
                                color: "RGB(34,79,140,0)",
                            },
                            ],
                            false
                        ),
                        },
                },
            }]
        },

        //下边是第二个图 每天维修时间
        arr1 : [],
        startTime1:'',
        endTime1:'',
        xData1:[],//暂存X轴数据
        value2:'',
        value6:'',
        value7:'',
        option1 :{
            grid: {
                    borderWidth: 1,
                    left: "7%",
                    top: "10%",
                    right: "5%",
                    bottom: "10%"
                    },
            textStyle:{
                color:"#E9EFFF ",
                fontStyle:'normal',
                fontSize: 12
            },
            tooltip: {
					trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
					axisPointer: {// 坐标轴指示器，坐标轴触发有效
                    label:{
                        show:true
                    },
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
            },
             /* 横轴 */
            xAxis: {
                /* 横轴为类别 */
                type: 'category',
                // nameLocation:'middle',
                // nameTextStyle:{
                //     align:'left'
                // },
                // axisLabel:{
                //     align:'center'
                // },
                data: ['1', '2', '3', '4', '5','6','7','8', '9', '10', 
                '11', '12','13','14','15', '16', '17', '18', '19','20',
                '21', '22', '23', '24', '25','26','27','28','29','30']
            },
            yAxis: {
                /* 纵轴为数据 */
                type: 'value',
                splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: "#155DAD",
                    opacity: 0.2,
                },
                },
            },
            /* 数据系列 */
            series: [{
                /* data值长度必须对应x轴长度 */
                data: [],
                /* 折线图 */
                type: 'line',
                /* 是否添加平滑效果，不书写则默认不平滑*/
                smooth:true,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                            {
                                offset: 0,
                                color: "RGB(34,79,140,1)",
                            },
                            {
                                offset: 1,
                                color: "RGB(34,79,140,0)",
                            },
                            ],
                            false
                        ),
                        },
                },
                //
                showSymbol: true, // 只有在 tooltip hover 的时候显示symbol
                Symbol: false,

                
                lineStyle: { // 线条样式
                    normal: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(24, 78, 10, 0.8, [ // 颜色渐变
                        {
                        offset: 0,
                        color: '#0184ea'
                        },
                        {
                        offset: 0.2,
                        color: 'rgb(1, 255, 255, 20)'
                        },
                        {
                        offset: 0.4,
                        color: 'rgb(0, 200, 255, 40)'
                        },
                        {
                        offset: 0.6,
                        color: 'rgb(0, 200, 200, 30)'
                        },
                        {
                        offset: 0.8,
                        color: 'rgb(0, 0, 255, 40)'
                        },
                        {
                        offset: 1,
                        color: 'rgb(0, 255, 255, 0)'
                        }
                    ])
                    // color:{
                    //     type:"linear",
                    //     x:0,
                    //     y:1,
                    //     x2:1,
                    //     y2:0,
                    //     // color: '#0184ea',
                    //     colorStops:[
                    //         {
                    //             offset: 0,
                    //             color: '#0184ea'
                    //         },
                    //         {
                    //             offset: 0.5,
                    //             color: '#0184ea'
                    //         },
                    //         {
                    //             offset: 0.6,
                    //             color: '#0184ea'
                    //         },
                    //         {
                    //             offset: 0,
                    //             color: '#0184ea'
                    //         },
                    //     ]
                    // }
                    }
                }

            }]
        },
        //故障分类统计
        exceptMessageCn:[],//暂存y轴纵坐标故障名称
        arr2:[],//暂存数据
        startTime2:'',
        endTime2:'',
        barWidth:10,
        value3:'',
        value8:'',
        value9:'',
        option2 : {
        
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            textStyle:{
                color:"#E9EFFF",
            },
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            /* 将垂直的x轴y轴交换即可 */
            yAxis: {
                type: 'category',
                data: [],
                // nameTextStyle:{
                //     width:90,
                //     heigth:20,
                // }
                
                axisLabel:{
                    width:100
                }

        
            },
            xAxis: {
                type: 'value'
            },
            legend: {
                data: [],
                left: 'right',
            },
            series: [{
                name: '',
                data: [100, 150, 120, 90, 50, 130, 110],
                type: 'bar',
                label: {
                    show: true,
                    /* 显示在右侧 */
                    position: 'right'
                },
                barWidth:10,
                itemStyle: {
                normal: {
                    barBorderRadius: [0, 30, 30, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#2FC6DC'
                    }, {
                    offset: 1,
                    color: '#2FC6DC'
                    }]),
                    }
                },
                showBackground: true,//剩余柱形条颜色
                backgroundStyle:{
                    color:'#082441',
                },
                

            }]
        },


        };

    
    },
    
    mounted() {
    this.initEcharts();
    this.faultCountRecordExceptst()
    this.initEchartscountMaintenanceTime()
    this.countMaintenanceTime()
    this. recordExceptCit()
    this.initEchartsRecordExceptCit()
    },
    methods: {
        initEcharts() {
        const myChart = echarts.init(this.$refs.mychart);// 图标初始化
        // myChart.clear()
        myChart.setOption(this.option);// 渲染页面
            //随着屏幕大小调节图表
        // window.addEventListener("resize", () => {
        //     // debugger
        //     myChart.resize;
        //     console.log(11111111111111);
        // });
        },

        faultCountRecordExceptst(){
            this.arr=[]
            this.xData=[]
            faultCountRecordExceptst({
                startTime:this.value4,
                endTime:this.value5,
                // startTime:this.value1[0],//这个是两个连在一起的日期选择器的格式
                // endTime:this.value1[1]
                //  startTime:this.startTime,//这个是输入框的格式
                //  endTime:this.endTime
                
            }).then(resp=>{
                let data = resp.data
                if (data.length > 0) {
                    for (let item of data) {
                        this.arr.push(item.counts);
                        // this.xData.push(item.createTime)
                        // this.xData.push(item.currentDate)
                        this.xData.push(item.currentDate.substr(5,5))
                        console.log(this.xData)
                    }
                    this.option.series[0].data=this.arr
                    this.option.xAxis.data=this.xData
                    this.initEcharts()
                }
            }).catch(e=>{
                console.log(e)
            })
        },
        //第二个图的函数(左边下方)
        initEchartscountMaintenanceTime() {
        const myChart1 = echarts.init(this.$refs.mychart1);// 图标初始化
        myChart1.setOption(this.option1);// 渲染页面
        //随着屏幕大小调节图表
        // window.addEventListener("resize", () => {
        //     myChart1.resize();
        // });
        },

        countMaintenanceTime(){
            this.arr1=[]
            this. xData1=[]
            countMaintenanceTime({
                // startTime:this.startTime1,
                // endTime:this.endTime1,
                // startTime:this.value2[0],
                // endTime:this.value2[1]
                startTime:this.value6,
                endTime:this.value7
            }).then(resp=>{
                let data1 = resp.data
                console.log(data1,'dadada')
                if (data1.length > 0) {
                    for (let item of data1) {
                        this.arr1.push(item.counts);
                        this.xData1.push((item.currentDate).substr(5,5))
                        // this.xData1.push(item.currentDate)
                    }
                    this.option1.series[0].data=this.arr1
                    this.option1.xAxis.data=this.xData1
                    console.log(this.option1.xAxis.data,'hh')
                    this.initEchartscountMaintenanceTime()
                }
            }).catch(e=>{
                console.log(e)
            })
        },
        //故障分类统计 recordExceptCit
        initEchartsRecordExceptCit() {
        const myChart2 = echarts.init(this.$refs.mychart2);// 图标初始化
        myChart2.setOption(this.option2);// 渲染页面
        //随着屏幕大小调节图表
        // window.addEventListener("resize", () => {
        //     myChart2.resize();
        // });
        },


        recordExceptCit(){
            this.exceptMessageCn=[]
            this.arr2=[]
            recordExceptCit({
                // startTime:this.startTime2,
                // endTime:this.endTime2,
                // startTime:this.value3[0],
                // endTime:this.value3[1]
                startTime:this.value8,
                endTime:this.value9
            }).then(resp=>{
                let data2 = resp.data
                if (data2.length > 0) {
                    for (let item of data2) {
                        this.exceptMessageCn.push(item.exceptMessageCn);
                        this.arr2.push(item.counts)
                    }
                    this.option2.yAxis.data=this.exceptMessageCn
                    this.option2.series[0].data=this.arr2
                    this.initEchartsRecordExceptCit()
                }
                
            }).catch(e=>{
                console.log(e)
            })
        }




    }
};
</script>

<style scoped lang="less">
.el-col{
    color: white;
    font-size: 10px;
}
/* 第一个大盒子左上方 */
.myCon{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.myechartFirst, .myechartFirst2{
    display: flex;
    justify-content: space-between;
}
.myechartFirst1{
    display: flex;
    justify-content: space-between;
}
.myLeft{
    position: relative;

    .mySpan{
        position: absolute;
        left: 30px;
        top:5px
    } 
}
.mySerch{
    display: flex;
    align-items: center;
}
.myLeft1{
    position: relative;
    .mySpan1{
        position: absolute;
        left: 30px;
        top:5px
    }
}
.myLeft2{
    position: relative;
    .mySpan2{
        position: absolute;
        left: 30px;
        top:5px
    }
}
/deep/.myInput1,.myInput2{
    width: 150px;
    //width: 300px;
    height: 27px;
    background: #06183D;
    // border-radius: 4px 4px 4px 4px;
    //opacity: 1;
    border: 1px solid #749DD3;
    color: #D3E5FF;
    box-sizing: border-box;
}
.myInput3,.myInput4{
    width: 81px;
    height: 27px;
    background: #06183D;
    //border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #749DD3;
    color: #D3E5FF;
    box-sizing: border-box;
}
    
.mybutton1{
    width:  150px;
    height: 27px;
    background: #06183D;
    //border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #749DD3;
    margin-left:10px;
img{
    width: 13px;
    height: 13px;
}
span{
    font-size: 14px;
    font-family: SourceHanSansCN-Light, SourceHanSansCN;
    font-weight: 300;
    color: #D3E5FF;
}

}
.mybutton2{
    width:  81px;
    height: 27px;
    background: #06183D;
    //border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #749DD3;
    margin-left:10px;
img{
    width: 13px;
    height: 13px;
}
span{
    font-size: 14px;
    font-family: SourceHanSansCN-Light, SourceHanSansCN;
    font-weight: 300;
    color: #D3E5FF;
}


}
/deep/.el-date-editor .el-range-separator {
    color: #D3E5FF;
    height: fit-content;
}

/deep/.el-date-editor .el-range-input::placeholder {
    color:#D3E5FF;
    font-size: 14px;

}
/deep/.el-range-editor .el-range-input{
    background: none;
}
/deep/.el-input__inner {
    background: none !important;
    border-radius: 0.21333rem 0.21333rem 0.21333rem 0.21333rem !important;
    opacity: 1 !important;
    height: 0.4rem;
    /* border: 0.01333rem solid #02489E !important; */
       text-align: center;
    border: none !important;
}

/deep/.el-input__icon {
    height: 30px !important;
    display: none;
}


</style>